{% extends "base.html" %}

{% block title %} - список вакансий{% endblock %}

{% block content %}

    {% if vacancies %}
        <div class="list-group">
            <a class="list-group-item" >Всего: {{ vacancies|length }}</a>
            {% for item in vacancies  %}
                <dif class="d-flex justify-content-between">
                    <a href="{{ item.alternate_url }}"
                       target="_blank"
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    >
                        {{ item.name }}
                        <span class="badge bg-light text-dark">shared skills: {{ item.coincidence }}%</span>
                    </a>
                    <form action="/vacancies/{{ item.id }}" method="POST">
                        <button type="submit" class="btn btn-outline-danger"> Del </button>
                    </form>
                </dif>
            {% endfor %}
            <br>
        </div>
    {% else %}
        <div class="alert alert-warning" role="alert">
            Нет вакансий!
        </div>
    {% endif %}

    <div class="d-flex flex-column mb-3">
        <button class="btn btn-outline-secondary"
                style="display: block"
                onclick="showSpinner()"
                id="genBtn">
            [ Сгенерировать сопроводительные письма ]
        </button>
    </div>

    <div class="d-flex justify-content-center">
        <div class="spinner-border text-secondary"
             role="status"
             style="display: none"
             id="spinner">
        </div>
    </div>

    <script>
      function showSpinner() {
        document.getElementById("spinner").style.display = "block";
        document.getElementById("genBtn").style.display = "none";
        window.location.href = "/cover_letters";
      }
    </script>

{% endblock %}
